<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>主页-财务管理后台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="__TMPL__/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__TMPL__/css/admin.css" media="all">
    <script type="text/javascript" src="__TMPL__/js/jquery.min.js"></script>
    <script type="text/javascript" src="__TMPL__/layui/layui.js"></script>
    <script type="text/javascript" src="__TMPL__/js/admin.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    收入
                    <span class="layui-badge layui-bg-blue layuiadmin-badge">月</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">{$money_income}</p>
                    <p>
                        单数
                        <span class="layuiadmin-span-color">{$count_income}<i class="layui-inline layui-icon layui-icon-flag"></i></span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    支出
                    <span class="layui-badge layui-bg-cyan layuiadmin-badge">月</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">{$money_expenses}</p>
                    <p>
                        单数
                        <span class="layuiadmin-span-color">{$count_expenses}<i class="layui-inline layui-icon layui-icon-face-smile-b"></i></span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    报销
                    <span class="layui-badge layui-bg-green layuiadmin-badge">年</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">

                    <p class="layuiadmin-big-font">{$money_bx}</p>
                    <p>
                        单量
                        <span class="layuiadmin-span-color">{$count_bx} <i class="layui-inline layui-icon layui-icon-dollar"></i></span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    工资
                    <span class="layui-badge layui-bg-orange layuiadmin-badge">月</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">

                    <p class="layuiadmin-big-font">66,666</p>
                    <p>
                        最近一个月
                        <span class="layuiadmin-span-color">15% <i class="layui-inline layui-icon layui-icon-user"></i></span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm12">
            <div class="layui-card">
                <div class="layui-card-header">
                    访问量
                    <div class="layui-btn-group layuiadmin-btn-group">
                        <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-xs">去年</a>
                        <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-xs">今年</a>
                    </div>
                </div>
                <div class="layui-card-body">
                    <div class="layui-row">
                        <div class="layui-col-sm8">
                            <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-pagetwo" lay-anim="fade" style="width: 100%; height: 280px;">
                                <div carousel-item="" id="LAY-index-pagetwo">
                                    <div class="layui-this" _echarts_instance_="1600680727345" style="-webkit-tap-highlight-color: transparent; user-select: none; background-color: rgba(0, 0, 0, 0);"><div style="position: relative; overflow: hidden; width: 667px; height: 332px;"><div data-zr-dom-id="bg" class="zr-element" style="position: absolute; left: 0px; top: 0px; width: 667px; height: 332px; user-select: none;"></div><canvas width="1334" height="664" data-zr-dom-id="0" class="zr-element" style="position: absolute; left: 0px; top: 0px; width: 667px; height: 332px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></canvas><canvas width="1334" height="664" data-zr-dom-id="1" class="zr-element" style="position: absolute; left: 0px; top: 0px; width: 667px; height: 332px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></canvas><canvas width="1334" height="664" data-zr-dom-id="_zrender_hover_" class="zr-element" style="position: absolute; left: 0px; top: 0px; width: 667px; height: 332px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></canvas></div></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-sm4">
                            <div class="layuiadmin-card-list">
                                <p class="layuiadmin-normal-font">月访问数</p>
                                <span>同上期增长</span>
                                <div class="layui-progress layui-progress-big" lay-showpercent="yes">
                                    <div class="layui-progress-bar" lay-percent="30%" style="width: 30%;"><span class="layui-progress-text">30%</span></div>
                                </div>
                            </div>
                            <div class="layuiadmin-card-list">
                                <p class="layuiadmin-normal-font">月下载数</p>
                                <span>同上期增长</span>
                                <div class="layui-progress layui-progress-big" lay-showpercent="yes">
                                    <div class="layui-progress-bar" lay-percent="20%" style="width: 20%;"><span class="layui-progress-text">20%</span></div>
                                </div>
                            </div>
                            <div class="layuiadmin-card-list">
                                <p class="layuiadmin-normal-font">月收入</p>
                                <span>同上期增长</span>
                                <div class="layui-progress layui-progress-big" lay-showpercent="yes">
                                    <div class="layui-progress-bar" lay-percent="25%" style="width: 25%;"><span class="layui-progress-text">25%</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<script>
    layui.config({
        base: '__TMPL__/public/', //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index'], function(){
        layui.define(function(e) {
            var a = layui.admin;
            layui.use(["admin", "carousel"],
                function() {
                    var e = layui.$,
                        a = (layui.admin, layui.carousel),
                        l = layui.element,
                        t = layui.device();
                    e(".layadmin-carousel").each(function() {
                        var l = e(this);
                        a.render({
                            elem: this,
                            width: "100%",
                            arrow: "none",
                            interval: l.data("interval"),
                            autoplay: l.data("autoplay") === !0,
                            trigger: t.ios || t.android ? "click": "hover",
                            anim: l.data("anim")
                        })
                    }),
                        l.render("progress")
                });
            layui.use(["laydate"], function () {
                var laydate = layui.laydate;
                laydate.render({
                    elem: '#time'
                    ,range: true
                });
            });

            layui.use(["carousel", "echarts"], function () {
                var data = [];
                $.ajax({
                    type: 'post',
                    data:{id:1},
                    url: "{:url('Main/statistics')}",
                    dataType: 'json',
                    async: false,
                    success: function (result) {
                        if (result.code === 0) {
                            data = result.data;
                        }
                    }
                });
                var e = layui.$,
                    a = (layui.carousel, layui.echarts),
                    l = [],
                    t = [{
                        tooltip: {
                            trigger: "axis"
                        },
                        calculable: !0,
                        legend: {
                            data: ["总金额","总单量", "网推侠：单量","万词闪投：单量","网推侠：金额","万词闪投：金额"]
                        },
                        xAxis: [{
                            type: "category",
                            data: data.label
                        }],
                        yAxis: [{
                            type: "value",
                            name: "单量",
                            axisLabel: {
                                formatter: "{value} "
                            }
                        },
                        {
                            type: "value",
                            name: "金额",
                            axisLabel: {
                                formatter: "{value} "
                            }
                        }],
                        series: [
                            {
                                name: "总金额",
                                type: "line",
                                yAxisIndex: 1,
                                data: data.income_amount
                            },
                            {
                                name: "网推侠：金额",
                                type: "line",
                                yAxisIndex: 1,
                                data: data.wtx_amount
                            },
                            {
                                name: "万词闪投：金额",
                                type: "line",
                                yAxisIndex: 1,
                                data: data.wcst_amount
                            },
                            {
                                name: "总单量",
                                type: "line",
                                data: data.income
                            },
                            {
                                name: "网推侠：单量",
                                type: "line",
                                data: data.wtx
                            },
                            {
                                name: "万词闪投：单量",
                                type: "line",
                                data: data.wcst
                            }]
                    }],
                    i = e("#LAY-index-pagetwo").children("div"),
                    n = function (e) {
                        l[e] = a.init(i[e], layui.echartsTheme),
                            l[e].setOption(t[e]),
                            window.onresize = l[e].resize
                    };
                i[0] && n(0)
            })

            e("sample", {});
        });
    });
</script>
</body>
</html>